<template>
    <div class="Vue">
        <div class="hostHeader">
            <div class="red">右侧的内容都是主项目的东西</div>
            <div @click="unload">手动卸载vue子项目</div>
            <div @click="load">手动加载vue子项目</div>
            <div @click="updata">手动往vue项目中传入一个随机数</div>
        </div>
        <div class="tip">
            此处往下都是 引入的vue的项目
        </div>
        <div class="vueApp" ref="refDom">
            <p>这里面的消息会随着，vue项目的加载而消失(也可以选则不添加)</p>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue"
import useMicroApp from "@/MicroApp/useMountedMicro.js"
let age = ref(10)
let { refDom, app, update } = useMicroApp({
    name: 'Vue',
    entry: process.env.NODE_ENV === 'production' ? '/child/vue' : '//localhost:9528/child/vue',
    props: {
        age: age.value
    }
})
function unload() {
    if (app.value) {
        app.value.unmount()
    }
}
function load() {
    if (app.value) {
        app.value.mount()
    }
}
function updata() {
    update({
        age: Math.random()
    })
}


</script>

<style scoped lang="less">
.Vue {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .hostHeader {
        height: 50px;
        justify-content: center;
        display: flex;
        align-items: center;
        border: 1px solid #F40;
        margin: 5px;

        .red {
            color: #F40;
        }

        &>div {
            margin: 0 10px;
            cursor: pointer;
        }
    }

    .tip {
        text-align: center;
        color: #F40;
    }

    .vueApp {
        flex: 1;
        margin: 10px;
        border: 1px solid green;
        box-sizing: border-box;

        p {
            text-align: center;
        }
    }
}
</style>
